<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>数据采集任务管理系统</title>
<meta name="author" content="DeathGhost" />
<link rel="stylesheet" type="text/css" href="/static/css/style.css" />
<!--[if lt IE 9]>
<script src="/static/js/html5.js"></script>
<![endif]-->
<script src="/static/js/jquery.js"></script>
<script src="/static/js/jquery.mCustomScrollbar.concat.min.js"></script>
<script>
	(function($){
		$(window).load(function(){
			
			$("a[rel='load-content']").click(function(e){
				e.preventDefault();
				var url=$(this).attr("href");
				$.get(url,function(data){
					$(".content .mCSB_container").append(data); //load new content inside .mCSB_container
					//scroll-to appended content 
					$(".content").mCustomScrollbar("scrollTo","h2:last");
				});
			});
			
			$(".content").delegate("a[href='top']","click",function(e){
				e.preventDefault();
				$(".content").mCustomScrollbar("scrollTo",$(this).attr("href"));
			});
			
		});
	})(jQuery);
</script>
</head>
<body>
<!--header-->
<header>
 <h1><img src="/static/images/admin_logo.png"/></h1>
 <ul class="rt_nav">
  <li><a href="/" target="_blank" class="website_icon">站点首页</a></li>
  <li><a href="/" class="admin_icon">DeathGhost</a></li>
  <li><a href="/" class="set_icon">账号设置</a></li>
  <li><a href="/account/logout" class="quit_icon">安全退出</a></li>
 </ul>
</header>

<!--aside nav-->
<aside class="lt_aside_nav content mCustomScrollbar">
 <h2><a href="/">起始页</a></h2>
 <ul>
  <li>
   <dl>
    <dt>任务管理</dt>
    <!--当前链接则添加class:active-->
    <dd><a href="/douyin/task" class="active">任务列表</a></dd>
    <dd><a href="/douyin/data_page/1">数据列表</a></dd>
   </dl>
  </li>
 </ul>
</aside>

<section class="rt_wrap content mCustomScrollbar">
 <div class="rt_content">
     <!--开始：以下内容则可删除，仅为素材引用参考-->
     <h1 style="color:red;font-size:20px;font-weight:bold;text-align:center;">公告</h1>
     <p style="color:red;font-size:16px;font-weight:bold;text-align:center;">直播间弹幕抓取；<br/>隐私直播间无法抓取数据请注意<br/>demo02</p>
     <!--点击加载-->
     <script>
     $(document).ready(function(){
		$("#loading").click(function(){
			$(".loading_area").fadeIn();
             $(".loading_area").fadeOut(1500);
			});
		 });
     </script>
     <section class="loading_area">
      <div class="loading_cont">
       <div class="loading_icon"><i></i><i></i><i></i><i></i><i></i></div>
       <div class="loading_txt"><mark>数据正在加载，请稍后！</mark></div>
      </div>
     </section>
     <!--结束加载-->
     <script>
     $(document).ready(function(){
    // 弹出文本性提示框
        $("#showPopTxt").click(function(){
            $(".pop_bg").show(); // 或者使用fadeIn()以获得动画效果
        });

    // 弹出：取消或关闭按钮
        $(".falseBtn, .pop_bg").click(function(e){
            if ($(e.target).hasClass('falseBtn') || $(e.target).is('.pop_bg')) { // 确保点击的是关闭按钮或遮罩层
                $(".pop_bg").hide(); // 或者使用fadeOut()隐藏
                }
            });
    });

    // 可选：添加一个简单的表单验证函数
    function validateForm() {
        // 这里添加你的验证逻辑
        // 如果验证不通过，阻止表单提交
        // return false; // 验证失败时阻止提交
        return true; // 验证通过允许提交
    }
     </script>
     <!-- 弹出框容器 -->
    <section class="pop_bg" style="display:none;">
        <div class="pop_cont"> <!-- 这里使用dialog标签作为示例，实际中可能仍需使用自定义遮罩和内容 -->
            <form action="/douyin/add" method="post" onsubmit="return validateForm()">
                <h3>添加一个直播任务</h3>
                 <div class="pop_cont_input">
                     <ul>
                         <li>
                            <!-- 表单内容 -->
                            <label for="address">直播地址：</label>
                            <input type="text" id="address" name="address" placeholder="输入地址多个用逗号分开" style="width: 300px; height: 150px;" required />
                             <br>
                             <label for="keyword">关键词词库：</label>
                             <input type="text" id="keyword" name="keyword" placeholder="英文逗号分开关键词" style="width: 300px; height: 100px;" required />
                             <br>
                             <label for="reword">回复词词库：</label>
                            <input type="text" id="reword" name="reword" placeholder="英文逗号分开关键词" style="width: 300px; height: 100px;" required />
                             <br>
                         </li>
                     </ul>
                    <!-- 底部按钮，注意移除了直接的点击事件，使用form的submit事件 -->
                    <div class="btm_btn">
                        <input type="submit" value="确认" class="input_btn"/>
                        <button type="button" class="input_btn falseBtn">关闭</button>
                    </div>
                 </div>
            </form>
        </div>
    </section>
     <section>
      <a class="link_btn" id="loading" href="/douyin/task">点击刷新</a>
      <button class="link_btn" id="showPopTxt" >增加新任务</button>
     </section>

      <table class="table">
       <tr>
        <th>房间id</th>
        <th>状态</th>
        <th>操作</th>
       </tr>
       {% for room,task in tasks.items() %}
           <tr>
            <td style="width:265px;"><div class="cut_title ellipsis">{{ room }}</div></td>
            {% if task.done() %}
                <td style="width:265px;" class="cut_title ellipsis">任务异常终止</td>
            {% else %}
                <td style="width:265px;" class="cut_title ellipsis">任务运行中</td>
            {% endif %}
            <td style="width:265px;" class="cut_title ellipsis">
                 <a href="/douyin/del/{{ room }}" class="inner_btn">删除</a>
            </td>
           </tr>
       {% endfor %}
      </table>
 </div>
</section>
</body>
</html>
